<template>
<div class="lottery-add views-container">
    <!-- 查看奖品弹窗 -->
    <el-dialog width="45%" :visible.sync="dialogListVisible" custom-class="reset-pwd wlm-form-dialog dialog-table" style="margin-top: -10vh;">
        <div class="wlm-form" v-if="dialogListVisible" style="margin-bottom:0">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">中奖商品</span>
            </div>
            <div class="wlm-table-header" style="margin-bottom:-20px;margin-top:14px;">
                <el-table class="chooseTable" :data="periods" :row-style="{cursor:'pointer'}" highlight-current-row style="width: 100%;padding:0 30px;border-bottom:none;margin-bottom:20px;">
                    <el-table-column prop="date" label="奖品名称">
                        <template slot-scope="scope">
                            <p>{{scope.row.title}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="商家名称">
                        <template slot-scope="scope">
                            <div style="display:flex; align-items:center;">
                                <div>{{scope.row.bus_name}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="门店名称">
                        <template slot-scope="scope">
                            <p v-for="item in scope.row.store_ids" :key="item.id">{{item.name}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="领取状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_get==1">已领取</span>
                            <span v-if="scope.row.is_get==2">未领取</span>
                            <span v-if="scope.row.is_get==3">已过期</span>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" type="primary" @click="dialogListVisible = false">确定</el-button>
        </footer>
    </el-dialog>
    <!-- 添加虚拟用户弹窗 -->
    <el-dialog width="45%" :visible.sync="dialogListForm" custom-class="reset-pwd wlm-form-dialog dialog-table" style="margin-top: -10vh;">
        <div class="wlm-form" v-if="dialogListForm" style="margin-bottom:0">
            <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">添加虚拟用户</span>
            </div>
            <div class="wlm-table-header" style="margin-bottom:-20px;margin-top:14px;">
                <el-form ref="active" :model="formData" size="small" label-width="200px" class="retail-form" label-position="right" style="height: 250px;margin:0 160px 0 160px;">
                    <el-form-item label="虚拟用户人数" prop="numberXn">
                        <el-input :maxlength='100' @blur='changeNum' style="width:200px;" v-model.trim="formData.numberXn">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="虚拟用户随机获得福卡数" prop="numberSj">
                        <el-input style="width:200px;" v-model.trim="formData.numberSj">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="其中集满福卡虚拟用户数" prop="numberJm">
                        <el-input style="width:200px;" v-model.trim="formData.numberJm">
                        </el-input>
                        <div class="form-help">此人数不得大于虚拟用户总人数，且虚拟中讲数也会消耗奖品总数量</div>
                    </el-form-item>
                    <el-form-item label="虚拟用户随机参与时间" prop="number">
                        <!-- <el-date-picker v-model="formData.time" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker> -->
                         <el-date-picker :picker-options="pickerOptions" style="width:360px;" :default-time="[`${new Date().getHours()}:${(new Date().getMinutes() + 5).toString().padStart(2,'0')}:00`,'23:59:59']"  v-model="formData.time" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
            <el-button size="small" type="primary" @click="clsckbtn()">确定</el-button>
        </footer>
    </el-dialog>
    <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
            <el-button size="small" type="primary" @click="adjunctionbtn">添加虚拟用户</el-button>
            <el-progress v-if="displayNone" type="circle" :stroke-width='2' :width="50" :percentage="percentNum" style="position: relative;top:15px;left:15px"></el-progress>
        </div>
        <div class="wlm-table-header">
            <el-form :model="tableFormatData" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="用户昵称：">
                        <el-input v-model="tableFormatData.nickName" placeholder="请输入用户昵称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="中奖状态：" class="search">
                        <el-select v-model="tableFormatData.status" placeholder="请选择">
                            <el-option v-for="item in [{lable:'已获奖',value:'1'},{lable:'未获奖',value:'2'}]" :key="item.value" :label="item.lable" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wlm-table-content">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="title" label="活动标题" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="用户" min-width="100">
                    <template slot-scope="scope">
                        <div class="user" style="display:flex;align-items:center;">
                            <div style="height:38px;width:38px;border-radius:38px;"><img style="height:100%;width:100%;border-radius:38px;" :src="scope.row.avatarUrl?scope.row.avatarUrl:''"></div>
                            <div class="info" style="display:flex;flex-direction:column;margin-left:10px;">
                                <span>{{scope.row.nickName}}</span>
                                <span>{{scope.row.user_id==0?'虚拟用户':scope.row.user_id}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="参与时间" min-width="60">
                    <template slot-scope="scope">
                        <span>{{scope.row.create_time}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="福字" width="170">
                    <template slot-scope="scope">
                        <div style="width:122px;">
                            <div v-for="item in scope.row.font" :key="item.id" :style="{color:item.user_font_count > 0?'red':'gray',fontSize:'25px'}" style="width:30px;display:inline-block;">
                                 {{item.name}}
                            </div>
                        </div>
                        

                    </template>
                </el-table-column>
                <el-table-column prop="user" label="是否获奖" min-width="60">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1">已获奖</span>
                        <span v-if="scope.row.status == 2">未获奖</span>
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="操作" min-width="60">
                    <template slot-scope="scope">
                        <div class="opreation-group" style="display:flex;">
                            <!-- <el-button style="padding:0 10px"  type="text">增加点赞</el-button> -->
                            <div>
                                <el-button style="padding:0 10px" v-if="scope.row.status == 1" @click="seetbtn(scope.$index)" type="text">查看奖品</el-button>
                            </div>
                            <div>
                                <div v-if="scope.row.status == 1" class="btn-line"></div>
                                <router-link class="wlm-text" tag="span" :to="{path:'/application/giftCards', query:{blessing_id:scope.row.blessing_id,id:scope.row.id,nickName:scope.row.nickName}}">
                                    <el-button style="padding:0 10px" type="text">赠送福卡</el-button>
                                </router-link>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <div class="pagination-content flex-row flex-justify-e flex-align-c">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 20, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    blessingUserLists,
    blessingDocAdd
} from '@/api/application'

export default {
    name: 'userTable',
    data() {
        return {
            pickerOptions: {
                    disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                    }
                },
            displayNone: false,
            num: '',
            percentNum: 0,
            dialogListVisible: false,
            dialogListForm: false,
            periods: [],
            currentPage4: 1,

            formData: {
                blessing_id: '',
                numberXn: '',
                numberJm: '',
                numberSj: '',
                time: '',
            },
            tableFormatData: {
                blessing_id: '',
                nickName: '',
                status: '',
                page: 1,
                list_rows: 10
            },
            tableData: [],
            totalNum: 0,
        }
    },
    mounted() {
        this.formData.blessing_id = this.$route.query.blessing_id
        this.tableFormatData.blessing_id = this.$route.query.blessing_id
        this.$nextTick(() => {
            setTimeout(() => {
                this.getList()
            }, 500)

        })
    },
    methods: {
        handleSizeChange(val) {
            this.tableFormatData.page = 1;
            this.tableFormatData.list_rows = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.tableFormatData.page = val;
            this.getList();
        },
        //清空
        filesEmpty() {
            this.tableFormatData.nickName = '';
            this.tableFormatData.status = '';
            this.tableFormatData.page = 1;
            this.tableFormatData.list_rows = 10
            this.getList()
        },
        //筛选
        filesSerch() {
            this.getList()
        },
        //获取列表
        getList() {
            blessingUserLists(this.tableFormatData).then((res) => {
                this.tableData = res.data.data.data
                this.totalNum = res.data.data.total;
            })
        },
        changeNum() {
            this.num = this.formData.numberXn;
            this.percentNum = 0
        },
        clsckbtn() {
            // this.displayNone = true;
            
            // 虚拟用户大于5
            if (this.formData.numberXn > 5) {
                // 其中集满福卡虚拟用户数大于5
                if (this.formData.numberJm > 5) {
                    this.dialogListForm = false
                    // this.displayNone = false;
                    console.log("111111")
                    blessingDocAdd({
                        blessing_id: this.$route.query.blessing_id,
                        number: 5,
                        rand_blessing_num: this.formData.numberSj,
                        start_time: this.formData.time[0],
                        end_time: this.formData.time[1],
                        over_blessing_num: 5,
                        sum_count:this.formData.numberXn
                    }).then((res) => {
                        if (res.data.code == 1) {
                            this.displayNone = true;
                            this.formData.numberXn = this.formData.numberXn - 5
                            this.formData.numberJm = this.formData.numberJm - 5
                            //  this.displayNone = false;
                            
                             this.clsckbtn()
                            var newNum = (this.num / 5).toFixed(2)
                            var addNum = (100 / Number(newNum).toFixed(2)).toFixed(2)
                            this.percentNum = Number(this.percentNum) + Number(addNum)
                        }
                    })
                } else {
                    console.log("2222")

                    blessingDocAdd({
                        blessing_id: this.$route.query.blessing_id,
                        number: 5,
                        rand_blessing_num: this.formData.numberSj,
                        start_time: this.formData.time[0],
                        end_time: this.formData.time[1],
                        over_blessing_num: this.formData.numberJm,
                        sum_count:this.formData.numberXn
                    }).then((res) => {
                        if (res.data.code == 1) {
                            this.displayNone = true;
                            this.dialogListForm = false
                            this.formData.numberXn = this.formData.numberXn - 5
                            this.formData.numberJm = this.formData.numberJm - this.formData.numberJm
                            
                             this.clsckbtn()
                            var newNum = (this.num / 5).toFixed(2)
                            var addNum = (100 / Number(newNum).toFixed(2)).toFixed(2)
                            this.percentNum = Number(this.percentNum) + Number(addNum)
                        }
                    })
                }

            } else {
                    console.log("33333",this.formData.blessing_id)

                blessingDocAdd({
                    blessing_id: this.$route.query.blessing_id,
                    number: this.formData.numberXn,
                    rand_blessing_num: this.formData.numberSj,
                    start_time: this.formData.time[0],
                    end_time: this.formData.time[1],
                    over_blessing_num: this.formData.numberJm,
                    sum_count:this.formData.numberXn
                }).then((res) => {
                    if (res.data.code == 1) {
                        this.$message.success('添加成功')
                        this.dialogListForm = false
                        this.displayNone = false;
                        this.formData={}
                        this.percentNum = 100
                        this.getList()
                    }
                })
            }
        },
        seetbtn(index) {
            this.dialogListVisible = true

            this.periods = this.tableData[index].prize_hit

        },
        adjunctionbtn() {
            this.dialogListForm = true
        },
        popoverbtn() {
            this.number = ''
        }
    }
}
</script>

<style scoped>
</style>
